<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        #uname {
            height: 30px;
            border-radius: 5px;
            font-size: 20px;
        }

        #pass {
            margin: 10px;
            height: 30px;
            border-radius: 5px;
            font-size: 20px;
        }

        #btn {
            height: 30px;
            width: 55px;
        }

        h1 {
            text-align: center;
            font-size: 35px;
        }

        td {
            border: 1px solid;
        }

        #tbl {
            margin: 10px;
            width: 60px;
            height: 20px;
            font-family: 华文楷体;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
            display: none;
        }

        #updateForm {
            display: none;
        }
    </style>
</head>
<>
<h1>登录界面</h1>
<form>
    姓名：<input type="text" name="uname" id="uname"><br>
    密码：<input type="password" id="pass"><br>
    <input type="button" value="登录" onclick="login()" id="btn">
    <a href="javascript:update()">修改信息</a>
</form>
<script>
    var ff = document.forms[0];
    function login() {
        var uname = ff.uname.value;
        var pass = document.getElementById('pass').value;
        var users = localStorage.getItem('users');
        if (!users) {
            alert("请先注册！");
        }
        users = JSON.parse(users);//得到的是数组形式
        if (!Array.isArray(users)) {//判断users是不是数组，如果不是数组，就要清除掉
            localStorage.clear();
            alert("登录失败，请重新注册！");
            return;
        }
        var has = users.some(function (item) {
            return item.name == uname && item.pass == pass;
        })
        if (has) {
            alert("登录成功！");
            location.href="homework-edit.html";
        } else {
            alert("登录失败！");
        }
    }
    /*var str = `
            <tr>
        <td>姓名</td>
        <td>密码</td>
        <td>年龄</td>
        <td>昵称</td>
        <td>籍贯</td>
        <td>身高</td>
        <td>体重</td>
        <td>生肖</td>
        <td>序号</td>
    </tr>`;
    function update() {
        var uname = ff.uname.value;//拿到输入框输入的姓名
        var users = localStorage.getItem('users');
        users = JSON.parse(users);//得到全部用户信息组成的数组

        if (uname == "") {
            alert("请输入你要修改的用户的姓名！");
            return;
        }
        var tbl = document.querySelector('#tbl');
        document.querySelector('#tbl').style.display="block";
        document.querySelector('#updateForm').style.display="block";
        for (var i = 0; i < users.length;i++) {
            if (uname !== users[i].name){

            } else {str = `<tr>
         <td>${users[i].name}</td>
        <td>${users[i].pass}</td>
        <td>${users[i].age}</td>
        <td>${users[i].nicheng}</td>
        <td>${users[i].jiguan}</td>
        <td>${users[i].shengao}</td>
        <td>${users[i].weight}</td>
        <td>${users[i].shengxiao}</td>
        <td>${i}</td>
        </tr>`;
                tbl.innerHTML += str;
            }
        }
        if (i > users.length) {
            alert("该用户不存在，请重新输入！");
            return;
        }
    }
    function qr_update() {
        var ff1 = document.forms[1];
        var newname = ff1.newname.value;
        var newpass = document.querySelector('#newpass').value;//拿到表单中重新修改的内容

        var newobj = {
            name: newname,
            pass: newpass
        }
        users.push(newobj);
        localStorage.setItem('users', JSON.stringify(users));
        alert("修改成功!");
    }*/
</script>
</body>
</html>